<template>
	<view class="news_item" @click="onPageJump('/pages/news/newsDetails?objId='+item.objId)">
		<view :class="{single:item.img.length <= 1}">
			<view class="news_info">
				<view class="title">{{item.title}}</view>
				<view class="imgs">
					<image v-for="(childItem,childIndex) of item.img" :key="childIndex" :src="childItem" mode="aspectFill"></image>
					<image v-if="item.img.length == 2" :src="item.img[1]" mode="aspectFill"></image>
				</view>
				<view class="introduce">{{item.introduce}}</view>
				<view class="info">
					<view class="browse_num">{{item.numVisit}}</view>
					<view class="time">{{item.createTime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		},
		index: {
			type: Number,
			default() {
				return 0;
			}
		}
	},
	methods: {
		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/mixin.scss';
.news_item {
	padding: 0 30rpx;
	background-color: #FFF;
	&:active {
		background-color: #f5f5f5;
	}
	> view {
		padding: 30rpx 0;
		border-bottom: 2rpx solid #ededed;
		position: relative;
		&.single {
			padding-left: 230rpx;
			.news_info  {
				height: 160rpx;
				.title {
					font-size: 30rpx;
				}
				.imgs {
					position: absolute;
					top: 30rpx;
					left: 0rpx;
					margin-top: 0;
					image {
						width: 200rpx;
						height: 160rpx;
					}
				}
				.introduce {
					display:block;
				}
				.info {
					margin-top: 0rpx;
					justify-content: space-between;
				}
			}
		}
		.news_info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.title {
				font-size: 34rpx;
				color: #333333;
				font-weight: bold;
				@include bov();
			}
			.introduce {
				font-size: 24rpx;
				color: #666666;
				@include toe();
				display: none;
			}
			.imgs {
				margin-top: 20rpx;
				display: flex;
				image {
					width: 210rpx;
					height: 160rpx;
					margin-left: 29rpx;
					&:first-child {
						margin-left: 0;
					}
				}
			}
			.info {
				margin-top: 20rpx;
				display: flex;
				justify-content: flex-end;
				.browse_num {
					font-size: 24rpx;
					color: #999999;
					display: flex;
					align-items: center;
					&::before {
						content: "";
						width: 37rpx;
						height: 21rpx;
						@include bis("../../static/icon/new_eye2.png");
						margin-right: 10rpx;
					}
				}
				.time {
					font-size: 24rpx;
					color: #999999;
					margin-left: 50rpx;
				}
			}
		}
	}
}
</style>
